<template>
    <div id="tow">
        <div class="tow_top">  
            <img :src="lists.coverImgUrl" alt="" class="mc">
           <div class="gdheader">
           <div class="gdheader_l">
               <img :src="lists.coverImgUrl" alt="">
               <div class="fr">
                   <p><span>&#xe680;</span>4654</p>
               </div>
               <div class="fl">
                   <span>歌单</span>
               </div>
           </div>
           <div class="gdheader_r">
               <p>{{lists.name}}</p>
               <div class="tu">
                   <img :src="touxiang" alt="">
                   <span>{{nickname}}</span>
               </div>
           </div>
       </div></div>
     
       <!-- 介绍歌单列表 -->
       <div class="jieshao">
        <div class="biaoqian">
          <span>标签</span>
           <a href="" v-for="item in listbq" :key="item">{{item}}</a>
           
        </div>
        <div class="wenben">
          <p :class="{'sl':active}">{{lists.description}}</p>
          <h5 @click="zk">{{wen}}</h5>
        </div>
       </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
             id:this.$route.params.id,
             lists:{},
             nickname:"",
             touxiang:"",
             active:true,
             listbq:[],
             wen:'展开'
        }
    },
    created(){
    this.getlist()
    },
    methods:{
        getlist(){
            // console.log(this.id)
             this.$axios.get('/playlist/detail?id='+this.id)
              .then(response=>{
                //   console.log(response)
                 this.lists = response.data.playlist
                  this.nickname= response.data.playlist.creator.nickname
                  this.touxiang =response.data.playlist.creator.avatarUrl
                  this.listbq= response.data.playlist.tags
                //   console.log(this.listbq)
             })
        },
        zk(){
            this.active = !this.active
            if(this.active==false){
               this.wen = '收起'
            }else{
                 this.wen = '展开'
            }
            
           
        }
    }
}
</script>

<style scoped>
#tow{
  width:100%;
} 
#tow>.tow_top{
  width:100%;
height:185px;
padding:25px 10px;
position: relative;
overflow: hidden;
}
#tow>.tow_top>img{
    position:absolute;
    left:0;
    top:0;
     width: 100%;
    height: 210px;
    z-index: -99;
}  
#tow>.tow_top>.gdheader{
    display:flex;
    justify-content: space-between;
}
.gdheader_l{
    position: relative;
}
.gdheader_l>img{
    width:126px;
    height:126px;
}
.gdheader_l>.fr{
    position:absolute;
    right:0;
    top:0;
    padding:2px;
}
.gdheader_l>.fr>p{
    color:white;
    font-size:12px;
}
.gdheader_l>.fr>p>span{
    font-family: "wy";
    color:white;
}
.gdheader_l>.fl{
    width:40px;
    height:20px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    background-color: #BF3A36;
    position: absolute;
    top:20px;
    left:0;
    color:white;
    font-size:12px;
    line-height: 20px;
    text-align: center;
    font-size:8px;
}
.gdheader_r{
    width:200px;
}
.gdheader_r>p{
    margin-top:10px;
    font-size:16px;
    color:white;
}
.gdheader_r>.tu{
    margin-top:30px;
    display: flex;
    align-items: center;
}
.gdheader_r>.tu>img{
    width:30px;
    height:30px;
    border-radius:50%;
    margin-right:10px;
}
.gdheader_r>.tu>span{
   
    font-size:15px;
    color:hsla(0,0%,100%,.7);
}
.jieshao{
    padding:15px;
}
.jieshao>.biaoqian>span{
    color:#888888;
    font-size:15px;
}
.jieshao>.biaoqian>a{
    display: inline-block;
    color:#888888;
    text-decoration: none;
    font-size:12px;
    border:1px solid #888888;
    padding:3px 6px;
    border-radius: 30px;
    margin:0 5px;
}

.sl{
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color:#888888;
    font-size:15px;
}
.wenben{
     color:#888888;
    font-size:15px;
}
.wenben>h5{
    text-align: right;
    color:black;
}
.mc{
 /* opacity: 0.6; */
 /* 给图片添加高斯模糊效果 */
 filter:blur(30px);

}


</style>